<template>
  <div class="page-miH page-bgBack">
    <a-spin :spinning="loading">
      <PageHeader @back="$router.go(-1)" subTitle="返回">扫码录入</PageHeader>
      <div style="padding: 24px">
        <div class="entryLeft">
          <div style="display: flex">
            <div style="padding-left: 84px">
              <img :src="QrCode" alt style="width: 120px; height: 120px" />
            </div>
            <div style="margin-left: 48px">
              <div style="font-size: 16px; font-weight: 500; color: #3c3d43">人员录入二维码</div>
              <div style="font-size: 14px; font-weight: 400; color: #a6a8b4">
                <div>说明：</div>
                <div>可以自定义设置二维码表单</div>
                <div>用户通过扫码填写的人员信息，将自动录入人才库中；</div>
                <div>二维码长期有效</div>
              </div>
            </div>
          </div>
          <div style="margin-right: 84px">
            <a-button type="primary" @click="downloadCod">下载二维码</a-button>
          </div>
        </div>
        <fieldTemplate @ok="ok" :typeVal="'SweepCodeEntry'"></fieldTemplate>
      </div>
    </a-spin>
  </div>
</template>

<script>
import { generateQRCode, onPostDownload } from "./api";
import XqFormMixin from "xqjr-plugin-form/mixins/XqFormMixin";
import fieldTemplate from "@/components/fieldTemplate/fieldTemplate";
const FormMixin = XqFormMixin();
export default {
  components: { fieldTemplate },
  mixins: [FormMixin],
  computed: {
    formField() {
      return this.formFieldL;
    },
    basicData() {
      return this.basicDataL;
    }
  },
  watch: {},
  data() {
    return {
      fieldList: [],
      siteFieldList: [],
      basicDataL: {},
      QrCode: "",
      formFieldL: null,
      loading: false
    };
  },
  created() {
    this.generateQRCode();
  },
  methods: {
    ok() {
      setTimeout(() => {
        this.generateQRCode();
      }, 500);
    },
    // 下载二维码
    downloadCod() {
      this.onDownload(this.QrCode);
      // window.open(this.QrCode + `?token=${this.$store.state.auth.token}`);
    },
    async onDownload(url) {
      onPostDownload(url, "二维码");
    },
    // 获取二维码
    generateQRCode() {
      generateQRCode().then((res) => {
        this.QrCode = res.data + `?token=${this.$store.state.auth.token}`;
      });
    }
  }
};
</script>

<style scoped lang="scss">
.iconShow {
  color: var(--primary);
}
.optionalFieldsBox {
  min-width: 360px;
  width: 360px;
  min-height: 500px;
  border-right: 1px solid #e8e8e8;
  padding-right: 24px;
}
.optionalFieldsLeft {
  font-size: 16px;
  font-weight: 500;
  color: #3c3d43;
  border-bottom: 1px solid #e8e8e8;
  padding: 18px 0 18px 0;
}
.optionalFieldsLAddField {
  width: 150px;
  height: 38px;
  border-radius: 4px;
  border: 1px solid #dfdfdf;
  margin-top: 12px;
  margin-right: 12px;
  text-align: center;
  line-height: 38px;
  cursor: pointer;
  position: relative;
}
.entryLeft {
  margin-top: 24px;
  width: 100%;
  height: 202px;
  background: #ffffff;
  box-shadow: 0px 4px 12px 0px rgba(106, 102, 246, 0.1);
  border-radius: 4px;
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;
}
.hei56 {
  min-height: 56px;
  line-height: 56px;
}
.rigBox {
  margin: 0 24px;
  border-radius: 4px;
  padding: 0 0 14px 14px;
  padding-bottom: 4px;
  width: 100%;
}
.rigBox:hover {
  background: #ffffff;
  box-shadow: 0px 4px 12px 0px rgba(106, 102, 246, 0.1);
  border: 1px dashed var(--primary);

  .dn {
    display: inline-block;
  }
}
.tableIcon1 {
  font-size: 13px;
  width: 24px;
  height: 24px;
  background: var(--primary);
  border-radius: 0px 4px 0px 4px;
  color: #fff;
  line-height: 24px;
}
.dn {
  display: none;
}
.parelative {
  position: relative;
}
.paAbsolut {
  position: absolute;
  top: 0;
  right: 0;
}
.tableIcon {
  width: 13px;
  height: 11px;
  color: var(--primary);
  margin-right: 8px;
}
</style>
